* {
	margin: 0px;
	padding: 0px;
}

.out_box {
	margin: auto;
}

.div_box {
	/* display: flex;
	flex-direction: row;
	margin: auto; */
}

.color1 {
	background-color: pink;
}

.color2 {
	background-color: hotpink;
}

.layui-row {
	margin: auto;
}

/* 当屏幕小于575px时使用以下样式 等于 xs */
@media (max-width:575px) {
	.layui-row {
		width: 100%;
	}
}

/* 等于sm */
@media (min-width:576px) and (max-width:767px) {
	.layui-row {
		width: 100%;
	}
}

/* 等于md */
@media (min-width:768px) and (max-width:991px) {
	.layui-row {
		width: 768px;
	}
}

/* 等于lg */
@media (min-width:992px) {
	.layui-row {
		width: 992px;
	}
}

@media (max-width:575px) {
	.div_box {
		width: 100%;
	}
}

@media (min-width:576px) and (max-width:767px) {
	.div_box {
		width: 100%;
	}
}

@media(min-width:768px) and (max-width:991px) {
	.div_box {
		width: 100%;
	}
}

@media (min-width:992px) {
	.div_box {
		width: 992px;
	}
}